<%--
  Created by IntelliJ IDEA.
  User: Ken
  Date: 2022/4/29
  Time: 15:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>性别统计页面</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        button {
            padding: 5px 20px;
            background-color: #00a2d4;
            color: white;
        }

        h1 {
            margin-bottom: 20px;
        }

        .main_div {
            width: 800px;
            height: 500px;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        table th {
            padding: 20px;
            background-color: #cccccc;
        }

        table td {
            padding: 20px;
            background-color: #e6e6e6;
        }
    </style>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/echarts.js"></script>

    <script>
        //0 - 表格 1 - 柱状图 2 - 饼状图
        var type = 0;
        var myChart = null;

        //页面加载后触发
        $(function(){
            //获取性别相关数据
            loadSexData();
        })

        //加载性别的相关数据
        function loadSexData(){
            $.ajax({
                type: "GET",
                url: "/tongjiServlet?method=tongjisex",
                success: function(data){
                    if (type == 0) {
                        //按照表格展示数据
                        showTable(data);
                    } else if(type == 1) {
                        //按照柱状图展示数据
                        showBar(data);
                    } else if(type == 2){
                        //展示饼状图
                        showPie(data);
                    }
                },
                dataType: "json"
            });
        }

        //展示表格
        function showTable(data){
            var tableStr = "<table>";
            tableStr += "<tr><th>性别</th><th>人数</th><th>比例</th></tr>";
            for(var i = 0; i < data.length; i++){
                var info = data[i];
                tableStr += "<tr><td>" + info.sex + "</td><td>" + info.count + "</td><td>" + (info.bili * 100) + "%" + "</td></tr>";
            }
            tableStr += "</table>";

            //放入div中
            $(".main_div").html(tableStr);
        }

        //展示柱状图
        function showBar(data){
            var sexs = [];
            var values = [];
            for(var i = 0; i < data.length; i++){
                var sexObj = data[i];
                //将当前性别放入数组中
                sexs.push(sexObj.sex);
                //将性别的人数放入数组中
                values.push(sexObj.count);
            }

            // 基于准备好的dom，初始化echarts实例
            myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            var option = {
                xAxis: {
                    type: 'category',
                    data: sexs
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: values,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        //展示饼状图
        function showPie(data){
            // 基于准备好的dom，初始化echarts实例
            myChart = echarts.init(document.getElementById('main'));

            var option = {
                title: {
                    left: '人数'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: data[0].count, name: data[0].sex },
                            { value: data[1].count, name: data[1].sex },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        //根据类型展示不同的效果
        function showInfo(t){
            type = t;
            //销毁容器
            if (myChart) {
                myChart.dispose();
            }
            //重新加载数据，展示图表
            loadSexData();
        }
    </script>

</head>
<body>
    <h1>统计-玩家性别比例</h1>
    <div>
        <button onclick="showInfo(0);">表格</button>
        <button onclick="showInfo(1);">柱状图</button>
        <button onclick="showInfo(2);">饼状图</button>
    </div>

    <div id="main" class="main_div">

    </div>
</body>
</html>
